<!DOCTYPE html>
<html lang="cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>播放历史</title>
	
	<!-- ZUI 标准版压缩后的 CSS 文件 -->
	<link rel="stylesheet" type="text/css" href="/css/zui.min.css">	
	<!-- custom css -->
	<link rel="stylesheet" type="text/css" href="/css/history.css">
	
</head>
<body>
<!--已完成 蓝色[默认]    当前 绿色    未开始 灰色-->
<!-- on 显示绿色 on后面的 显示灰色,   on前面的 显示蓝色[默认] -->

<!-- 只需要在当前任务 加一个 class='on' 就可以了 -->

<!-- 这个页面没有用到img图片,纯css -->
<!-- 更新时间:2021年8月3日 -->
<div class="container-fixed">
	
	<#include "menu.html">

<div class="row history-panel" id="history-panel">	
	<!-- 播放历史 ul -->
</div>
</div>


</body>


<!-- 模板 -->
<script id="his_template" type="text/html">
<ul class="timeLine" style="width: 100%;">
	{{each hisList his idx}}
	<li {{if his.isToday}}class="on"{{/if}}>
        <p>{{his.time}}<span>{{his.date}}</span></p>
        <div class="con">
			<a href="/video/play?vodId={{his.vid}}&code={{his.code}}&ep={{his.ep}}&time={{his.progressSeconds}}">
				<img class="lazy" src="img/loading.gif" data-original="{{his.cover}}" alt=""/>
				<span>{{his.name}} 观看至 {{his.progress}}</span>
			</a>
			<div class="his-del pull-right"><a href="javascript:;" data-id="{{his.key}}">删除</a></div>			
		</div>
    </li>
    {{/each}}
</ul>
</script>


<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script type="text/javascript" src="/js/zui.min.js"></script>
<!-- Image Lazy load -->
<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<!-- Art-Template.js -->
<script type="text/javascript" src="/js/template-web.min.js"></script>

<!-- 播放历史 -->
<script type="text/javascript" src="/js/free-gt/history.js"></script>

<script>
  
/* 网页加载完成 */
$(function(){
	
	highlightMenu('his');
	
	var now = new Date();
	var date = now.Format("yyyy-MM-dd");
	
	var his_map = his_get();
	his_map = new Map(Object.entries(his_map));
	
	var his_list = [];
	var flag = true;
	var idx = 0;

    his_map.forEach(function(value, key, map){
		if(value != null){
			his_list.push(value);
		}
		idx += 1;
	});

	his_list = his_list.sort(function(a,b){
		return b.timestamp-a.timestamp;
	});
	
	// 取前 50 条
	his_list = his_list.slice(0,51);
	

	// 标记今日最早记录
	for(i=0; i<his_list.length; i++){
		his_list[i].isToday = false;		
		if(his_list[i].date == date){
			his_list[i].isToday = true;
			if(i > 0){
				his_list[i-1].isToday = false;
			}
		}
	}
	
	let result = template('his_template',{'hisList' : his_list});  //===注意点:  模板上得rows要跟template上得rows对应
    $('#history-panel').html(result) //===直接赋值就可以实现了
    
    // 图片懒加载
	$("img.lazy").lazyload({ 
		threshold : 100, // 设置阀值 
		effect : "fadeIn" // 设置图片渐入特效 
	});
    
});

/** 播放历史记录删除 */
$('#history-panel').on('click', '.his-del a', function(){
	var key = $(this).attr('data-id');
	his_del(key);
}); 

</script>

</html>